<template>
	<view>
		<u-popup v-model="visibleDialog" mode="bottom">
			<view class="popup">
				<u-form :model="form" ref="uForm" label-width="120" :error-type="['toast']" >
					<u-form-item label="产品" prop="name">
						<u-input type="select" placeholder="请输入标题" v-model="form.name" @click="show = true" />
					</u-form-item>
					<u-form-item label="标准单价" prop="discountAmount">
						<u-input placeholder="请输入标题" v-model="form.discountAmount" type="number" @change="change"/>
					</u-form-item>
					<u-form-item label="单位" prop="unit">
						<u-input placeholder="请输入标题" v-model="form.unit" :disabled="true"/>
					</u-form-item>
					<u-form-item label="意向数量" prop="count">
						<u-input placeholder="请输入标题" v-model="form.count" type="number"/>
					</u-form-item>
					<u-form-item label="总价" prop="amount">
						<u-input placeholder="请输入标题" v-model="form.amount" :disabled="true"/>
					</u-form-item>
					<u-form-item label="备注" prop="remark">
						<u-input placeholder="请输入标题" v-model="form.remark"/>
					</u-form-item>
				</u-form>
				<u-button class="action-view" @click="saveClick">保存</u-button>
			</view>
		</u-popup>
		<product-select-view :visible.sync="show" @confirm="productConfirm"></product-select-view>
	</view>

</template>

<script>
	import ProductSelectView from '@/pages_operate/components/product-select-view.vue'
	export default {
		name: 'PorductAddView',
		components: {
			ProductSelectView,
		},
		props: {
			visible: {
			  type: Boolean,
			  default: false
			},
		},
		data() {
			return {
				form: {
					id: '',
					name: '',
					discountAmount: 0,
					unit: '',
					count: 0,
					amount: 0,
					remark: ''
				},
				
				show: false,
			}
		},
		computed: {
			visibleDialog: {
			  get () {
				return this.visible
			  },
			  set (val) {
				this.$emit('update:visible', val)
			  }
			}
		},
		watch: {
			visible(newValue, oldValue) {
				if (newValue) {
					this.form = {}
				}
			},
			'form.discountAmount'(newValue, oldValue) {
				this.change()
			},
			'form.count'(newValue, oldValue) {
				this.change()
			}
		},
		methods: {
			productConfirm(res) {
				console.log(res);
				this.form = {
					id: res.id,
					name: res.name,
					discountAmount: res.standardAmount,
					unit: res.unit,
					count: 1,
					amount: res.standardAmount,
					remark: ''
				}
			},
			
			saveClick() {
				this.visibleDialog = false;
				this.$emit('confirm', { ...this.form });
			},
			
			change() {
				this.form.amount = this.form.discountAmount * this.form.count;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.popup{
		padding: 30rpx;
	}
</style>